<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../js/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../css/login.css" />
</head>

<body>
    <div class="login-page">
        <div class="login-title">用户账号登录</div>
        <div id="login_id">
            <template>
                <div class="login-input-row horizontal">
                    <div class="row-title">手机号码</div>
                    <div class="phone-input">
                        <input type="tel" placeholder="输入手机号码"  maxlength="11" v-bind:readonly="phoneIsRed" v-model="phone" />
                    </div>
                    <div class="get-sms-code" :class="codeIsClick ? 'active':''">
                        <span tapmode @click="checkCodeClick">{{codeHint}}</span>
                    </div>
                </div>
                <div class="login-input-row horizontal">
                    <div class="row-title">验证码</div>
                    <div class="code-input">
                        <input type="number" placeholder="输入验证码"  maxlength="6"  oninput="if(value.length>6)value=value.slice(0,6)" v-model="code" />
                    </div>
                </div>
                <div class="submit-btn-bor" @click="onLogin">登录</div>
            </template>
        </div>
    </div>
</body>

<script type="text/javascript" src="../js/jquery/jquery320min.js"></script>
<script type="text/javascript" src="../js/vant/vuemin.js"></script>
<script type="text/javascript" src="../js/vant/vantmin.js"></script>
<script type="text/javascript" src="../js/tools.js"></script>
<script type="text/javascript">
    var smsCodeVal;
    var loginVm;
    $(function () {
        loginVm = new Vue({
            el: '#login_id',
            data: {
                phone:'',
                code:'',
                codeHint:'获取验证码',
                codeIsClick:false,//获取验证码按钮是否允许点击
				phoneIsRed:false//是否设置手机输入框为只读模式
            },
            watch:{
                'phone': function() {
                    var resPhone = checkPhone(this.phone);
                    this.codeIsClick=resPhone;
                },
            },
            methods: {
                startCountDown:function(){
                    //开始计时
                    var timeNum=60;//设定30秒时间
                    this.codeIsClick=false;
                    this.phoneIsRed=true;
                    this.codeHint='重新获取'+timeNum;
                    if(smsCodeVal!=undefined){
                        clearInterval(smsCodeVal);
                    }
                    //点击获取验证码
                    smsCodeVal = setInterval(function() {
                        timeNum--;
                        loginVm.codeHint='重新获取'+timeNum;
                        // 你倒计时显示的地方元素
                        if(timeNum==0){
                            loginVm.codeIsClick=true;
                            loginVm.phoneIsRed=false;
                            loginVm.codeHint='重新获取';
                            clearInterval(smsCodeVal);
                        }
                    }, 1000);
                },
                checkCodeClick:function(){
                    //点击获取短信验证码
                    if(!this.codeIsClick) return;
                    this.startCountDown();
                },
                onLogin:function(){
                    var phone = this.phone;
					var code = this.code;
                    if(phone==undefined || phone==null || phone==''){
                        vant.Toast.fail("请输入手机号");
                    }
                    else if(!checkPhone(phone)){
                        vant.Toast.fail("请输入正确的手机号");
                    }
                    else if(code==undefined || code==null || code==''){
                        vant.Toast.fail("请输入验证码");
                    } else{

                    }
                    
                }

            }
        });
    });


</script>

</html>